<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <ul>
			<!-- :title 和 :del 都是 v-bind 的用法（注：使用 props 传参时 key 不支持驼峰也不支持 - ） -->
            <!-- 未声明的属性会挂载到 template 定义的根节点上（既 li 上） -->
            <!-- v-for="item in list 表示：循环调用 todo-item 组件，每次传递一个 item -->
            <!-- :title="item.title" 表示：将 item 的 title 属性传递给组件的 title（组件中 props 里声明的） -->
            <todo-item v-for="item in list" :title="item.title" :del="item.del"></todo-item>
        </ul>
    </div>
    <script src="./script/vue.js"></script>
    <script>
		<!-- 使用 Vue.component 定义组件。参数1：组件名称（组件名称不可重复）， 参数2：组件配置 -->
        Vue.component('todo-item', {
            <!-- 组件接收哪些参数 -->
            props: {
                title: String,
                del: {
                    type: Boolean,
                    default: false,
                },
            },
            <!-- 组件的 html 模板 -->
            template: 
				`<li>
                    <!-- v-if 和 v-else 只显示一个 -->
					<span v-if="!del">{{title}}</span>
					<span v-else style="text-decoration: line-through">{{title}}</span>
                    <!-- v-show 通过 style="display: none;" 隐藏 html 标签 -->
					<button v-show="!del">删除</button>
				</li>`,
            <!-- 由于组件可能被复用，因此要定义成 function 这样保证返回的 data 是独一无二的 -->
            data: function() {
                return {}
            },
            methods: {

            },
        })
        var vm = new Vue({
            <!-- el 是挂载点。 Vue 会管理 el 选项命中的元素及其内部的后代元素 -->
            el: '#app',
            <!-- data: {} 与 data: function(){return{}} 的区别 -->
            <!-- data: {} 是引用类型，其它地方修改会导致互相影响。这里由于 Vue 是根组件（只使用一次），因此没有问题 -->
            <!-- data: function() 每次都返回新的 data，不会产生复用问题 -->
            data: {
                list: [{
                        title: '课程1',
                        del: false
                    }, {
                        title: '课程2',
                        del: true
                    }],
            }
        })
    </script>
</body>

</html>